<template>
  <div class="container">
    <inform />
    <div class="question-cont">
      <div class="question-num">
        <span> - </span>
        <span> {{ num + 1 }} </span>
        <span> - </span>
      </div>
      <div class="question">
        <div class="topic">{{ list[num].name }}</div>
      </div>
      <div class="answer">
        <div v-for="(temp, index) in 4" :key="index">
          <img v-if="temp===1" src="@/assets/01yh-btn.png" class="yh" @click="checkedFun(1)">
          <img v-if="temp===2" src="@/assets/02cy-btn.png" class="yh" @click="checkedFun(2)">
          <img v-if="temp===3" src="@/assets/03khs-btn.png" class="yh" @click="checkedFun(3)">
          <img v-if="temp===4" src="@/assets/04qt-btn.png" class="yh" @click="checkedFun(4)">
          <img
            v-if="temp===checked || temp===trueNum"
            v-show="checked===trueNum || temp===trueNum"
            :miva-temp="temp"
            :miva-checked="checked"
            src="@/assets/right.png"
            class="right"
          >
          <img
            v-if="temp===checked"
            v-show="checked!==trueNum"
            src="@/assets/wrong.png"
            class="wrong"
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import inform from '@/components/inform'
import { userQuestion, verifyAnswer, addLottery } from '@/api/utils'
export default {
    components: {
        inform: inform
    },
    data() {
        return {
            num: 0,
            checked: null,
            trueNum: null,
            list: [{}],
            socre: 0,
            clickOff: true
        }
    },
    async created() {
        const res = (await userQuestion({ num: 10 })) || {}
        this.list = res.data
    },
    methods: {
        async checkedFun(type) {
            if (!this.clickOff) return console.log('wait')
            this.clickOff = false
            const res = await verifyAnswer({ id: this.list[this.num].id, type })
            if (res.data === null) {
                this.trueNum = type
                this.socre++
            } else {
                this.trueNum = res.data
            }
            this.checked = type

            setTimeout(async() => {
                // console.log(process.env.NODE_ENV)
                // if (process.env.NODE_ENV === 'development') {
                //     console.log(this.num, this.socre)
                // if (this.num >= 0) {
                //     if (this.socre < 1) {
                //         this.$router.replace({ path: '/failure', query: { socre: this.socre }})
                //     } else {
                //         await addLottery()
                //         this.$router.replace({ path: '/lotto' })
                //     }
                //     return console.log(this.socre)
                // }
                // } else {
                if (this.num > 8) {
                    if (this.socre < 10) {
                        this.$router.replace({ path: '/failure', query: { socre: this.socre }})
                    } else {
                        addLottery()
                        this.$router.replace({ path: '/lotto' })
                    }
                    return console.log(this.socre)
                }
                // }
                this.num++
                this.checked = null
                this.trueNum = null
                this.clickOff = true
            }, 1000)
        }
    }
}
</script>
<style lang="less" scoped>
.container {
  width: 94%;
  margin: 0 auto;
  .question-cont {
    margin: 3% auto;
    //  height: 250px;
    //  line-height: 250px;
    //  overflow: hidden;
    .question-num {
      text-align: center;
      padding: 10px auto;
      width: 100px;
      margin: 0 auto;
      height: 50px;
      line-height: 50px;
      background: #ffd737;
      border-radius: 20px;
      z-index: 999;
      position: relative;
      span {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .question {
      background: #eeeeee;
      z-index: 99;
      border-radius: 10px;
      height: 230px;
      position: relative;
      margin-top: -30px;
    }
    .topic {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -0);
    }
    .answer {
      display: flex;
      justify-content: space-between;
      margin-top: 10%;
      position: relative;
      > div {
        position: relative;
        width: 100%;
      }
      .yh {
        width: 100%;
        padding: 5%;
        box-sizing: border-box;
      }
      .right,
      .wrong,
      .right-two,
      .wrong-two,
      .right-three,
      .wrong-three,
      .right-four,
      .wrong-four {
        position: absolute;
        top: 25%;
        width: 100%;
        left: 2%;
      }
      .right-two,
      .wrong-two {
        left: 28%;
      }
      .right-three,
      .wrong-three {
        left: 53%;
      }
      .right-four,
      .wrong-four {
        left: 77%;
      }
    }
  }
}
</style>
